<!--
 * @Description: 第三十六章 （开发h5适配）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-23 01:35:10
-->
<template>

  <div>
    <h1>第三十六章 （开发h5适配）</h1>

    <div>
      <div class="box">
        <header class="header">
          <div>left</div>
          <div>center</div>
          <div>right</div>
        </header>
        <div>
          <el-button @click="change(36)">大</el-button>
          <el-button @click="change(24)">中</el-button>
          <el-button @click="change(16)">小</el-button>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
  // 給你想做全局的字体大小，添加这个变量就可以了 var(--size)
  // 简单点可以用vueuse

  import { useCssVar } from '@vueuse/core'
  const change = (num:number) => {
    const size  = useCssVar('--size')
    // 等同于
    // document.documentElement.style.setProperty('--size', num+'px')
    // document.documentElement.style.getPropertyValue('--size')
    size.value = num + 'px'
  }
</script>
<style scoped lang="less">

:root{
  --size:14px;
}

.box {

  width: 375px;
  height: 667px;
  border: 1px solid #ccc;



  .header {

    display: flex;

    div {
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-align: center;
      font-size:var(--size)
    }

    // px 是固定单位，不会随着屏幕的变化而变化
    // rem r = root 1rem = html font-size, 如果font-size=16px, 那么1rem=16px
    // 375屏幕适合多少html fontsize？ 引入淘宝的flexiable.js
    // vw vh 相对于视口宽高进行控制的 375屏幕 1vw = 3.75px
    // 百分比是相对于父元素的，viewport相对于视口的
    // UI稿是px的，编写一个px to viewport插件
    div:nth-child(1) {
      width: 100px;
      background-color: red;
    }

    div:nth-child(2) {
      background-color: green;
    }

    div:nth-child(3) {
      width: 100px;
      background-color: blue;
    }

  }
}
</style>
